# Type Hinting

Just like an NPM Package, {props.name || 'Module Federation'} artifacts also generate types and enjoy hot-reloading of types, even though the artifacts are hosted on a remote CDN.

<code>{props.pkgName || '@module-federation/enhanced'}</code> has type hinting enabled by default. This article will introduce several common usage scenarios and their specific configurations.

## Usage Scenarios

### Generating Types

When building with the build plugin provided by <code>{props.pkgName || '@module-federation/enhanced'}</code>, type files are automatically generated.

### Loading Types

1. Consumer modifies `tsconfig.json`

Add `paths` in `tsconfig.json`:

```json
{
  "compilerOptions": {
    "paths": {
      "*": ["./@mf-types/*"]
    }
  }
}
```

2. Start the consumer and producer

> info: You don't need to worry about the startup order of the producer and consumer.

After starting, the consumer will automatically fetch the producer's type files.

### Type Hot Reloading

After modifying the producer's code, the consumer will automatically fetch the producer's types.

![hot-types-reload-static](@public/guide/type-prompt/hot-types-reload-static.gif)

### Runtime API Type Hinting

:::info
If the builder is `webpack`, you also need to add `**/@mf-types/**` to [watchOptions.ignored](https://webpack.js.org/configuration/watch/#watchoptionsignored) to avoid circular compilation issues caused by type updates.
:::

You need to add `./@mf-types/*` to the `include` field to enjoy `Runtime` `loadRemote` type hinting and type hot reloading.

```json title="tsconfig.json"
{
  "include": ["./@mf-types/*"]
}
```

![hot-types-reload](@public/guide/type-prompt/hot-types-reload.gif)

### Third-Party Package Type Extraction

{props.name || 'Module Federation'} automatically extracts third-party package types to ensure that `exposes` file types can be accessed normally.

![third-party](@public/guide/type-prompt/third-party.jpg)

### Nested Type Re-export

{props.name || 'Module Federation'} supports nested remotes and will automatically extract the types of nested remotes.

![nested-remote](@public/guide/type-prompt/nested-remote.jpg)

### Dynamic Type Hinting

{props.name || 'Module Federation'} supports loading dynamic types and also supports hot updates.

![dynamic-remote-hot-types-reload](@public/guide/type-prompt/dynamic-remote-hot-types-reload-static.gif)

## Configuration

- [dts](../../configure/dts): Type generation/loading
- [dev](../../configure/dev): Type hot reloading

## FAQ

### Project has circular compilation and cannot be terminated

A: It is likely that the compiler is watching for changes in the type folder or the `dist` directory. Add `@mf-types` to the ignored files.

For example, with webpack/rspack:

```ts
config.watchOptions = {
  ignored: ['**/node_modules/**', '**/@mf-types/**'],
};
```

### 2. No type files are generated, how to find the reason?

**Solution**

1. Add the `FEDERATION_DEBUG=true` environment variable before the project startup command.
2. Set [dts.displayErrorInTerminal](../../configure/dts#displayerrorinterminal) to `true`.
3. Start the project and check the console output.
4. (Optional) If there is no error in the console, check the `.mf/typesGenerate.log` log file.
